<template>
  <div class="statistics-salesman">
    <!--@btn-change="dateTypeChange"-->
    <!--@search="search"-->
    <df-search-title title="业务概况"
                     :options="dates"
                     @search="searchActive"
                     @btn-change="searchBtnChange"
                     has-date-type has-search has-reset has-date></df-search-title>
    <div class="e-chart-box flex jcb mb20">
      <e-charts :options="companyObj" class="company bg flex-1 mr15 pb10" height="300px"></e-charts>
      <e-charts :options="achievementObj" class="achievement bg flex-1 pb10" height="300px"></e-charts>
    </div>
    <div class="table bg p20">
      <gl-table :data="data" :columns="columns" @sort-change="sortChange"></gl-table>
      <gl-pagination :total="total" :curr="curr" :size="limits" @callback="paginationChange"></gl-pagination>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "StatisticsSalesman",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        dateArr: [],
        dates: [
          {label: '本月', value: 'tm'},
          {label: '上个月', value: '1lm'},
          {label: '近半年', value: '6m'},
          {label: '1年', value: '1y'},
        ],
        company: [],
        achievement: [],
        companyObj: {},
        achievementObj: {},
        data: [],
        columns: [
          {label: '业务员', prop: 'bus_name'},
          {label: '联系方式', prop: 'phone'},
          {label: '所属公司', prop: 'company_name', sortable: 'custom'},
          {label: '客户总数', prop: 'customer_num', sortable: 'custom'},
          {label: '产品总数', prop: 'product_num', sortable: 'custom'},
          {label: '订单数量', prop: 'order_num', sortable: 'custom'},
          {label: '订单金额', prop: 'total_price', sortable: 'custom'},
        ],
        total: 100,
        curr: 1,
        limits: 10,
        orderBy: [],
      }
    },
    watch: {
      company(val) {
        let _this = this;
        let maxWidth = 0;
        let selected = {};
        let data = val.map((e, i) => {
          maxWidth = Math.max(((e.company_name.length > 7 ? 8.5 : e.company_name.length) + .5) * 12, maxWidth);
          selected[e.company_name] = !!e.total_income;
          return {
            value: e.total_income,
            name: e.company_name,
            sname: e.company_name.replace(/[^]{7,}/, s => s.slice(0, 7) + '...'),
          };
        });
        this.companyObj = {
          title: {
            text: '公司收入占比统计',
            x: 'center',
            y: 15
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            right: 20,
            bottom: 50,
            icon: 'circle',
            selected,
            data: data.map(e => e.name),
            formatter(name) {
              let item = data.find(e => e.name === name);
              let value = item.value;
              let total = data.reduce((t, c) => t + c.value * 1, 0);
              if (!total) {
                total = 1;
              }
              let out = [
                `{a|${item.sname}}`,
                `{b|${(value / total * 100).toFixed(2)}%}`,
                `{c|￥${_this.tools.moneyNumber(value, 2)}}`,
              ];

              return out.join('');
            },
            textStyle: {
              rich: {
                a: {
                  width: maxWidth,
                },
                b: {
                  width: 50,
                }
              }
            }
          },
          series: [
            {
              name: '公司收入占比统计',
              type: 'pie',
              radius: '75%',
              center: ['30%', '55%'],
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data,
            }
          ]
        };
      },
      achievement(val) {
        // console.log(val);
        let x = [];
        let y = [];
        val.map(e => {
          x.push(e.bus_name);
          y.push(e.performance);
        });
        this.achievementObj = {
          title: {
            text: '业绩排行',
            x: 'center',
            y: 15
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: x,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                // rotate: -30,
                align: 'center',
                // margin: 25,
              },
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'amount',
              type: 'bar',
              barWidth: '20%',
              data: y
            }
          ]
        };
      },
    },
    created() {
    },
    mounted() {
    },
    methods: {
      setEcharts(company, achievement) {
        this.company = company;
        this.achievement = achievement;
      },
      getList(init, echart) {
        if (init) {
          this.curr = 1;
        }
        let [start_time, end_time] = this.dateArr || [];

        if (start_time) {
          start_time = start_time / 1000 | 0;
        }
        if (end_time) {
          end_time = end_time / 1000 | 0;
        }

        this.http.$post('admin/order.Api/salesman_statistics', {
          company_id: this.userInfo.company_id,
          start_time,
          end_time,
          limits: this.limits,
          order: [this.orderBy],
          curr: this.curr,
        }, {loading: true}).then(res => {

          this.data = res.list.list;
          this.total = res.list.total;

          echart && this.$nextTick(() => {
            this.setEcharts(res.company_income_ratio, res.saleman_rank);
          });

        }).catch(this.$err);
      },

      searchBtnChange(type, search) {
        search();
      },

      searchActive(date) {
        this.dateArr = date;

        this.getList(1, 1);
      },
      sortChange(column, prop, order) {
        this.orderBy = order ? [prop, order.replace('ending', '')] : [];
        this.getList();
      },
      paginationChange({curr, size}) {
        this.curr = curr;
        this.limits = size;
        this.getList();
      }

    },
  }
</script>

<style scoped lang="less">
  .bg {
    background-color: #fff;
    border-radius: 5px;
  }


</style>